<template>
	<view class="content-main bg-color-white">
		<view class="tn-margin-bottom-xl bg-color-white">
			<view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						<text style="color:red">*</text>
						请选择分类
					</view>
				</view>
			</view>
			<view class="flex flex-js-sb flex-js-center pa-12" style="">
				<TnButton width="210" :plain="feedIndex == index ? false : true" height="65"
					v-for="(item,index) in feedbookList" :key="index" @click="handleTag(index)">{{item.title}}
				</TnButton>
			</view>
			<view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						<text style="color:red">*</text>
						详细内容
					</view>
				</view>
			</view>
			<view class="flex flex-js-sb flex-js-center pa-12" style="">
				<textarea style="width: 100%;height:180rpx" v-model="formData.content" class="G-Pt-5"
					placeholder="请输入反馈内容，添加图片方便我们定位问题" name="" id="" cols="30" rows="10"></textarea>
			</view>
			<view class="pl-12">
				<TnImageUpload v-model="imageList" :limit="3" :action="actionUrl" :show-error-tips="false" :custom-upload-callback="uploadCallbackHandle" />
				<view>最多可上传3张</view>
			</view>
			<view class="tn-flex tn-flex-row-between pa-12 tn-strip-bottom-min">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						联系方式
					</view>
				</view>
			</view>
			<view class="pl-12 plr-12">
				<TnInput v-model="formData.phoneNum" placeholder="请输入手机号或微信号" size="sm" />
			</view>
		</view>
		<view class="tn-flex flex-js-center tn-footerfixed">
			<TnButton width="80%" height="80" shape="round" text-color="#FFFFFF" font-size="32" shadow fontBold
				bgColor="#4b49e8" click-modifiers="stop" @click="handleSubmitFeedback">提交反馈</TnButton>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { userFeedBack } from '@/services/api'
	import type { ImageUploadCustomCallbackFunction } from '@tuniao/tnui-vue3-uniapp'
	const imageList = ref<string[]>([])
	const feedbookList = [{
			title: '内容反馈',
			value: 0
		}, {
			title: '功能建议',
			value: 1
		}, {
			title: '其他',
			value: 2
		}
	]
	const formData = ref({
		"kind": 0,
		"content": "",
		"phoneNum": "",
		"picUrls": []
	})
	const feedIndex = ref(0);
	const actionUrl = ref('https://hr.xming-ai.com/xm/platform/file_upload')
	const uploadCallbackHandle : ImageUploadCustomCallbackFunction = (
		data : UniApp.UploadFileSuccessCallbackResult
	) => {
		const resData = JSON.parse(data.data)
		console.log(resData.data.file_url)
		return resData.data.file_url
	}
	const handleTag = (index: number) => {
		feedIndex.value = index;
		formData.value.kind = feedbookList[index].value
	}
	const handleSubmitFeedback = async () => {
		let obj = {
			...formData.value,
			picUrls: imageList.value
		}
		if(obj.content== ''){
			uni.showToast({
				title: '请先填写完整数据',
				icon:"none",
				duration: 2000, //持续时间为 2秒
			})
			return;
		}
		const { code, msg } = await userFeedBack(obj)
		if (code == 0) {
			uni.showToast({
				title: msg,
				icon: 'success',
				duration: 2000, //持续时间为 2秒
			})
			setTimeout(function(){
				uni.navigateBack()
			},2000)
		} else {
			uni.showToast({
				title: msg,
				icon: 'error',
				duration: 2000, //持续时间为 2秒
			})
		}
	}
</script>

<style lang="scss" scoped>
	.content-main {
		width: 720rpx;
		margin: 0 auto;
		border-radius: 16rpx;
		overflow: hidden;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}

	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-top {
		width: 100%;
		// border-top: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	/* 用户头像 start */
	.user-image {
		width: 90rpx;
		height: 90rpx;
		position: relative;
	}

	.user-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 100rpx;
		z-index: 1024;
		box-shadow: 0 0.5px 3px transparent;
	}
</style>